<template>
	<div class="news-detail-container">
		<!-- 新闻头部，包含标题和元数据 -->
		<div class="news-header">
			<h1 class="news-detail-title">{{ news.title }}</h1>
			<div class="news-meta">
				<span class="news-source">来源: {{ news.source }}</span>
				<span class="news-date">发布时间: {{ news.publishDate }}</span>
			</div>
		</div>
		<!-- 新闻内容区域 -->
		<div class="news-content">
			<p class="news-detail-content">{{ news.content }}</p>
		</div>
		<!-- 返回新闻列表的导航链接、收藏按钮和点赞按钮 -->
		<div class="action-buttons">
			<router-link to="/newsList" class="back-button">返回新闻列表</router-link>
			<div class="right-buttons">
				<van-button type="primary" size="big" @click="onClickAddMyFavorites" :loading="isAddingToLike"
					:class="{ 'favorite-button':!isFavorited, 'favorite-button-active': isFavorited }">
					{{ isAddingToLike? '正在加入...' : (isFavorited? '已收藏' : '加入收藏') }}
				</van-button>
				<van-button type="primary" size="big" @click="onClickLike" :loading="isLiking"
					:class="{ 'like-button':!isLiked, 'like-button-active': isLiked }">
					{{ isLiking? '正在点赞...' : (isLiked? '已点赞' : '点赞') }}
				</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';

	export default {
		data() {
			return {
				news: {}, // 初始化为空对象，后续根据id从数组中获取具体新闻
				isAddingToLike: false, // 是否正在添加收藏
				isFavorited: false, // 是否已收藏
				isLiked: false, // 是否已点赞
				isLiking: false, // 是否正在点赞
			};
		},
		created() {
			// 获取当前路由参数中的id
			const id = this.$route.params.id;
			// 模拟的新闻列表数据，实际项目中应从合适的数据源获取（如API、Vuex等）
			const newsList = [{
					id: 1,
					title: "全球首款声控投影触控智能手机发布",
					summary: "创新企业推出全球首款声控投影触控智能手机，突破屏幕限制，实现墙面投影操控，重塑移动交互体验。",
					content: "在国际通信技术展览会上，一家创新企业正式发布全球首款声控投影触控智能手机。该手机搭载微型投影模块，可将画面投射至墙面、桌面等平面，配合高精度语音识别系统与手势追踪技术，用户不仅能通过语音指令操作投影画面，还能直接在投影区域进行触控操作。此外，手机内置的 AI 算法可根据投影环境自动调整画面比例和亮度，确保显示效果清晰。行业专家表示，这款手机的诞生，为移动办公和娱乐场景带来全新可能，或将引领交互技术革新潮流。",
					source: "通信技术导报",
					publishDate: "2025-05-01",
				},
				{
					id: 2,
					title: "首款生物识别加密防护智能手机问世",
					summary: "科技团队研发出首款生物识别加密防护智能手机，集成多种生物认证技术，为用户数据安全构筑坚固防线。",
					content: "近日，一支专业科技团队推出首款生物识别加密防护智能手机。该手机创新性地集成指纹、虹膜、面部识别及掌纹识别等多重生物认证技术，同时采用量子加密算法，对用户数据进行全方位保护。当检测到非授权访问时，手机会自动启动数据自毁程序，确保信息安全。除了强大的安全性能，手机还配备了高刷新率屏幕和优质摄像模组，满足用户日常使用需求。业内人士指出，这款手机的出现，将推动智能手机在数据安全领域的发展。",
					source: "信息安全时报",
					publishDate: "2025-05-02",
				},
				{
					id: 3,
					title: "全球首款液态散热系统智能手机亮相",
					summary: "知名品牌推出全球首款液态散热系统智能手机，有效解决高负荷运行发热问题，保障性能持续稳定输出。",
					content: "某知名手机品牌在新品发布会上展示了全球首款液态散热系统智能手机。该手机内置微型液态循环散热装置，通过冷却液的流动带走处理器、电池等核心部件产生的热量，相比传统散热方案，散热效率提升 60% 以上。在长时间运行大型游戏或进行视频剪辑等高负载任务时，手机依然能保持流畅运行，避免因过热导致的性能降频。同时，手机在外观设计上也十分精美，兼具科技感与时尚感。相关评测机构认为，这款手机的散热技术创新，将为高性能手机的发展提供新的方向。",
					source: "手机评测周刊",
					publishDate: "2025-05-03",
				},
				{
					id: 4,
					title: "具备自修复屏幕功能的智能手机发布",
					summary: "科研机构联合企业推出具备自修复屏幕功能的智能手机，轻微划痕自动修复，延长屏幕使用寿命。",
					content: "一家科研机构与企业合作，发布了具备自修复屏幕功能的智能手机。该手机屏幕采用特殊纳米材料，当屏幕表面出现轻微划痕或裂痕时，材料中的修复因子会在常温下自动聚合，填补受损区域，实现屏幕自修复。实验数据显示，在日常使用中，90% 以上的轻微划痕可在 24 小时内完全修复。此外，手机还拥有出色的拍照和续航能力，满足用户多样化需求。屏幕自修复技术的应用，有望改变用户对手机屏幕维护的传统认知，提升产品使用体验。",
					source: "材料科学前沿",
					publishDate: "2025-05-04",
				},
				{
					id: 5,
					title: "首款支持脑电波情绪识别的智能手机面市",
					summary: "科技公司推出首款支持脑电波情绪识别的智能手机，通过分析用户情绪提供个性化服务，开启智能交互新维度。",
					content: "一家科技公司正式推出首款支持脑电波情绪识别的智能手机。手机内置的脑电波传感器可实时监测用户脑电波信号，结合 AI 算法分析用户当前情绪状态，如愉悦、焦虑、疲惫等，并根据情绪提供相应的个性化服务。例如，当检测到用户处于疲惫状态时，手机会自动调整为护眼模式，并推荐舒缓的音乐；若识别到用户情绪低落，会推送励志内容或有趣的视频。同时，手机在性能和配置方面也十分出色，满足用户的各种使用场景。心理学专家表示，这项技术为手机与用户的情感交互提供了新途径。",
					source: "智能生活杂志",
					publishDate: "2025-05-05",
				},
				{
					id: 6,
					title: "搭载空间定位全息导航的智能手机震撼登场",
					summary: "创新品牌推出搭载空间定位全息导航的智能手机，将导航信息以全息形式呈现，带来更直观精准的导航体验。",
					content: "一家创新品牌发布了搭载空间定位全息导航的智能手机。该手机运用先进的空间定位技术和全息投影技术，可将导航路线、地标信息等以全息立体的形式呈现在现实场景中，用户无需低头看手机屏幕，通过佩戴的智能眼镜就能清晰看到导航指引。同时，手机的全息导航系统还能根据周围环境实时调整投影角度和位置，确保信息显示准确无误。此外，手机还具备强大的性能和丰富的功能。交通领域专家认为，这款手机的全息导航技术，将极大提升出行导航的安全性和便捷性。",
					source: "交通科技资讯",
					publishDate: "2025-05-06",
				},
			];

			// 根据id查找对应的新闻
			const newsItem = newsList.find((news) => news.id === parseInt(id));
			if (newsItem) {
				this.news = newsItem;
				this.checkIsFavorited(); // 检查该新闻是否已被收藏
				this.checkIsLiked(); // 检查该新闻是否已被点赞
			}
		},
		methods: {
			onClickAddMyFavorites() {
				if (this.isAddingToLike) {
					return;
				}
				this.isAddingToLike = true;
				if (this.isFavorited) {
					// 如果已收藏，从收藏列表中移除
					const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
					const newFavorites = favorites.filter((fav) => fav.id !== this.news.id);
					localStorage.setItem('favorites', JSON.stringify(newFavorites));
					this.isFavorited = false;
					showToast('已取消收藏');
				} else {
					// 如果未收藏，添加到收藏列表
					const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
					favorites.push(this.news);
					localStorage.setItem('favorites', JSON.stringify(favorites));
					this.isFavorited = true;
					showToast('已加入收藏');
				}
				this.isAddingToLike = false;
			},
			checkIsFavorited() {
				const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
				this.isFavorited = favorites.some((fav) => fav.id === this.news.id);
			},
			onClickLike() {
				if (this.isLiking) {
					return;
				}
				this.isLiking = true;
				if (this.isLiked) {
					// 如果已点赞，取消点赞
					const likedNews = JSON.parse(localStorage.getItem('likedNews')) || [];
					const newLikedNews = likedNews.filter((news) => news.id !== this.news.id);
					localStorage.setItem('likedNews', JSON.stringify(newLikedNews));
					this.isLiked = false;
					showToast('已取消点赞');
				} else {
					// 如果未点赞，添加点赞
					const likedNews = JSON.parse(localStorage.getItem('likedNews')) || [];
					likedNews.push(this.news);
					localStorage.setItem('likedNews', JSON.stringify(likedNews));
					this.isLiked = true;
					showToast('点赞成功');
				}
				this.isLiking = false;
			},
			checkIsLiked() {
				const likedNews = JSON.parse(localStorage.getItem('likedNews')) || [];
				this.isLiked = likedNews.some((news) => news.id === this.news.id);
			},
		},
	};
</script>

<style scoped>
	/* 定义颜色变量 */
	:root {
		--primary-color: #007bff;
		--secondary-color: #f4f4f4;
		--text-color: #333;
		--background-color: #fff;
		--border-color: #e0e0e0;
		--shadow-color: rgba(0, 0, 0, 0.1);
		--button-bg-color: #007bff;
		--button-hover-bg-color: #0062cc;
		--button-active-bg-color: #0056b3;
		--button-text-color: #fff;
		--button-border-radius: 8px;
		--button-padding: 10px 20px;
		--button-font-size: 16px;
		--button-line-height: 1.4;
		--button-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		--button-transition: all 0.3s ease;
	}

	/* 新闻详情容器样式 */
	.news-detail-container {
		max-width: 800px;
		margin: 20px auto;
		padding: 20px;
		border: 1px solid var(--border-color);
		border-radius: 10px;
		box-shadow: 0 4px 8px var(--shadow-color);
		background-color: var(--background-color);
		font-family: Arial, sans-serif;
		line-height: 1.6;
	}

	/* 新闻头部样式 */
	.news-header {
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--border-color);
		text-align: center;
	}

	/* 新闻标题样式 */
	.news-detail-title {
		font-size: 32px;
		color: var(--text-color);
		margin-bottom: 10px;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	}

	/* 新闻元数据样式 */
	.news-meta {
		font-size: 16px;
		color: #666;
	}

	/* 新闻内容样式 */
	.news-content {
		font-size: 18px;
		color: var(--text-color);
		line-height: 1.8;
		letter-spacing: 0.5px;
		padding: 0 20px;
	}

	/* 返回按钮、收藏按钮和点赞按钮容器样式 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.back-button {
		display: inline-block;
		padding: var(--button-padding);
		background-color: var(--button-bg-color);
		color: var(--button-text-color);
		text-decoration: none;
		border-radius: var(--button-border-radius);
		transition: var(--button-transition);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-weight: bold;
		text-align: center;
		/* 移除默认的box-shadow */
		box-shadow: none;
	}

	.back-button:hover {
		background-color: var(--button-hover-bg-color);
		/* 移除hover时的transform和box-shadow */
		transform: none;
		box-shadow: none;
	}

	.back-button:active {
		background-color: var(--button-active-bg-color);
		transform: none;
		box-shadow: none;
	}

	.right-buttons {
		display: flex;
		gap: 10px;
	}

	.favorite-button,
	.like-button {
		padding: var(--button-padding);
		background-color: var(--button-bg-color);
		color: var(--button-text-color);
		border: none;
		border-radius: var(--button-border-radius);
		transition: var(--button-transition);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-weight: bold;
		text-align: center;
		/* 移除默认的box-shadow */
		box-shadow: none;
	}

	.favorite-button:hover,
	.like-button:hover {
		background-color: var(--button-hover-bg-color);
		/* 移除hover时的transform和box-shadow */
		transform: none;
		box-shadow: none;
	}

	.favorite-button:active,
	.like-button:active {
		background-color: var(--button-active-bg-color);
		transform: none;
		box-shadow: none;
	}


</style>